<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple苹果(中国大陆) - 注册</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="icon" href="./imgs/pingguo.svg" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/xiangyingshi.css">
    <link rel="stylesheet" href="./css/home.css">
</head>
<body>
    <!-- 网页头部 -->
    <div class="mengban"></div>
    <div id="header">
        <div class="zhezhao">

        </div>
        
        <div class="header">
            <ul class="title">
                <li><a href="./home.html"><img src="./imgs/biaotiimgs/logo.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/Mac.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/iPad.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/iPhone.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/Watch.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/Music.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/jishu.png" alt=""></a></li>
                <li><a class="sousuo"><i class="iconfont">&#xe612;</i></a>
                <div class="sousuo-tan">
                        <div>
                            <i class="iconfont">&#xe612;</i>
                            <input type="text" >
                            <span>搜索 apple.com.cn</span>
                            <i class="iconfont guanbi">×</i>
                        </div>
                        
                </div>
                <aside>
                    <section class="sousuo-xia">
                        <h3>快速连接</h3>
                        <ul>
                            <li><a href="">查找零售店</a></li>
                            <li><a href="">Apple Store 商店在线选购</a></li>
                            <li><a href="">配件</a></li>
                            <li><a href="">AirPods</a></li>
                            <li><a href="">AirTag</a></li>
                        </ul>
                    </section>
                </aside>
                        
                </li>
                <li id="shangdian"><img src="./imgs/biaotiimgs/shooping.png" alt="" class="shangdian">
                    <div class="gouwudai-xiala">
                        <p class="gouwudai-kong">你的购物袋是空的</p>
                        <div>
                            <ul>
                                <li><i class="iconfont">&#xe61f;</i><a href="">购物袋</a></li>
                                <li><i class="iconfont">&#xe624;</i><a href="">收藏</a></li>
                                <li><i class="iconfont">&#xec89;</i><a href="">订单</a></li>
                                <li><i class="iconfont">&#xe60c;</i><a href="">账户</a></li>
                                <li><i class="iconfont">&#xe60a;</i><a href="./login.html">登录</a></li>
                            </ul>
                        </div>
                        
                    </div>
                </li>
            </ul>
        </div>
        
        <div class="header_shipei">
            <ul class="title2">
                <li><a href=""><i class="iconfont">&#xe62b;</i></a></li>
                <li><a href=""><img src="./imgs/pingguo2.svg" alt=""></a></li>
                <li><a href=""><img src="./imgs/shangdianda.svg" alt="" class="shangdian"></a></li>
            </ul>
        </div>
    </div>
    <div id="sub">
        <div class="sub">
            <div class="apple-id">
                Apple&nbsp;ID
            </div>
            <div class="jieda">
                <ul>
                    <li><a href="">登录</a></li>
                    <li><a href="" class="chuangjian">创建您的 Apple ID</a></li>
                    <li><a href="">常见问题解答</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="hero">
        <div id="chuangjian">
            创建您的 Apple&nbsp;ID
        </div>
    </div>
    
    <div class="zhuce-cont">
        <div class="indio">
            <div>只需一个 Apple ID，您即可访问 Apple 所有内容。</div>
            <div>已有 Apple ID？<a href="">在此查找></a></div>
        </div>
        
        
        <div class="flow">
            <div class="container">
                <div class="container-xs">
                    <input type="text" class="xingshi" id="xingshi">
                    <span class="xing">姓氏</span>
                    <input type="text" class="mingzi" id="mingzi">
                    <span class="ming">名字</span>
                    <h3>国家或地区</h3>
                    <select name="" id="" class="guojia"></select>
                    <input type="text" class="chuasheng" id="chusheng">
                    <span class="chu">出生日期</span>

                </div>

            </div>
            <div class="flow-section">
                <div class="container-xs">
                    <input type="text" id="Apple">
                    <span class="chu1">name@example.com</span>
                    <h3>这将是您的新 Apple ID。</h3>
                    <input type="text" id="pass">
                    <span class="chu2">密码</span>
                    <input type="text" id="queren">
                    <span class="chu3">确认密码</span>
                </div>
            </div>
            <div class="label">
                <div class="label-kuang">
                    <div>
                        <img src="./imgs/woshou.png" alt="">
                    </div>
                        您的 Apple ID 信息被用于确保您能够安全登录并访问您的数据。出于安全性、支持和报告的目的，Apple 会记录您的某些使用情况数据。<a href="">了解数据的管理方式。</a>
                    </div>

                    <div class="btnn">
                        <button id="btn">
                        <div class="overflow-text">
                            继续
                        </div>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="foot">
            <div class="foot-1">
                <p>
                    更多选购方式：<a href="">查找你附近的 Apple Store 零售店</a>及<a href="">更多门店</a>，或者致电 400-666-8800。
                </p>
            </div>
            <div class="foot-2">
                <div class="foot-bottom">
                    <p>
                        Copyright © 2021 Apple Inc. 保留所有权利。
                    </p>
                </div>
                <div class="foot-bottom2">
                    <p>
                        <a href="">隐私政策</a>
                        <a href="">使用条款</a>
                        <a href="">销售政策</a>
                        <a href="">法律信息</a>
                        <a href="" class="xiao">网站地图</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
    
</body>
<script src="./js/jquery.js"></script>
<script src="./js/home.js"></script>
<script src="./js/shousuo.js"></script>
<script>
    $("#btn").click(function(){
        $.ajax({
            url:"http://localhost:3000/api1",
            data:{
                type:"register",
                username:$("#Apple").val(),
                password:$("#pass").val(),
                password:$("#pass").val(),
                password:$("#pass").val(),
                password:$("#pass").val(),
                password:$("#pass").val(),
            },
            success:res=>{
                res = JSON.parse(res);
                // console.log(res);
                if(res.code === 0){
                    alert("用户名重复");
                    $("#Apple").val("");
                    $("#Apple")[0].focus();
                }else if(res.code === 1){
                    if(confirm("注册成功，是否跳转到登录")){
                        location.href = "./login.html"
                    }
                }
            }
        })
    })

</script>
</html>